<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="./dist/css/bootstrap.min.css" />

        <style>
            .media{
                border-bottom: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <nav aria-label="...">
                <ul class="pagination">
                    <li>
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            1
                            <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            2
                            <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li class="active">
                        <a href="#">
                            3
                            <span class="sr-only">(current)</span>
                        </a>
                    </li>
                    <li class="disabled">
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>

            <button class="btn btn-primary" type="button">
                Messages
                <span class="badge">10</span>
            </button>

            <div class="page-header">
                <h1>
                    国内
                    <small>CHINA</small>
                </h1>
            </div>

            <div class="media">
                <div class="media-body">
                    <h4 class="media-heading">Middle aligned media</h4>
                    <p>
                        Cras sit amet nibh libero, in gravida nulla. Nulla vel
                        metus scelerisque ante sollicitudin commodo. Cras purus
                        odio, vestibulum in vulputate at, tempus viverra turpis.
                        Fusce condimentum nunc ac nisi vulputate fringilla.
                        Donec lacinia congue felis in faucibus.
                    </p>
                </div>
                <div class="media-right media-bottom">
                    <a href="#">
                        <img
                            class="media-object"
                            style="width: 50px; height: 50px"
                            src="https://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000657032630_1_200x200.jpg"
                            alt="..."
                        />
                    </a>
                </div>
            </div>

            <div class="panel panel-info">
                <div class="panel-heading">
                    <span>
                        <input type="checkbox" />
                        <label for="">全选</label>
                    </span>

                    <span></span>
                </div>
                <div class="panel-body">
                    <div class="media">
                        <div class="media-left media-bottom">
                            <a href="#">
                                <img
                                    class="media-object"
                                    style="width: 50px; height: 50px"
                                    src="https://image1.suning.cn/uimg/b2c/newcatentries/0000000000-000000000657032630_1_200x200.jpg"
                                    alt="..."
                                />
                            </a>
                        </div>
                        <div class="media-body">
                            <h4 class="media-heading">专柜同款 恒源祥100%纯羊毛围巾男女通用围脖 5503驼色</h4>
                            <p>
                                价格
                            </p>
                            <p>
                                <button id="btn">删除商品</button>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="panel-footer">Panel footer</div>
            </div>
        </div>
    </body>
</html>
